<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="content-script-type" content="text/javascript" />
	<title>Wasabi</title>
	<link rel="shortcut icon" href="img/icon.png" />
	<link rel="apple-touch-icon" href="img/icon_big.png" />
	<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
	<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.9.2.js"></script>
	<script type="text/javascript" src="js/jquery.easing.js"></script>
	<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
	<script type="text/javascript" src="js/knockout-2.2.1.js"></script>
	<script type="text/javascript" src="js/knockout.mapping.js"></script>
	<script type="text/javascript" src="js/mCustomScrollbar.js"></script>
	<script type="text/javascript" src="js/raphael.js"></script>
	<script type="text/javascript" src="js/jsphylosvg.js"></script>
	<script type="text/javascript" src="js/icons.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
</head>
<body data-bind="css:{hiddentop:settingsmodel.hidebar}">
  <div id="page">
    <noscript><div><img src="img/warning.png">You have disabled Javascript in your web browser.<br>Please turn on Javascript to use this web application.</div></noscript>
	<div id="top" class="away" data-bind="css:{hidden:settingsmodel.hidebar}">
	  <div class="title" data-bind="visible:!offline()&&(seqsource()||treesource())"><input type="text" class="static noselect" data-bind="value:exportmodel.savename,valueUpdate:'afterkeydown',style:{width:exportmodel.savename().length*9+'px'}" onmousedown="if(!$(this).hasClass('editable')) event.preventDefault();" onclick="titlemenu(event,this)" onblur="if(model.currentid()) communicate('writemeta',{id:model.currentid(),key:'name',value:this.value}); $(this).removeClass('editable');" autocomplete="off"><span class="note" data-bind="fadevisible:unsaved" style="display:none">(unsaved)</span></div>
	  
	  <div id="topcollapse" class="bottomarr" title="Click to (un)collapse the menubar" onclick="toggletop()"><span>&#x25B2;</span></div>
	  
	  <div class="buttonblock" style="left:15px">
	  		<a id="file" class="button" onclick="togglemenu('filemenu')"><img src="img/file.png" class="before">Data</a>
	      	<div id="filewrap" class="buttonmenuwrap">
	      		<div class="menuborder"></div>
	      		<div id="filemenu" class="buttonmenu" style="margin-top:-150px"><ul data-bind="foreach:filemenu"><li data-bind="click:function(d){$parent.menuclick('filemenu',d)}">
	      			<span data-bind="html:$data+'<img class=\'right\' src=\'img/'+$data+'.png\'>'"></span>
	      		</li></ul></div>
	      		<div class="topshadow"></div>
	        </div>
	   </div>
	   
	   <div class="buttonblock" style="left:8%;margin-left:60px;padding:0 10px;">
	  		<a id="run" class="button" onclick="togglemenu('runmenu')"><img src="img/run.png" class="before">Tools</a>
	      	<div id="runwrap" class="buttonmenuwrap">
	      		<div class="menuborder"></div>
	      		<div id="runmenu" class="buttonmenu" style="margin-top:-35px" data-bind="visible:!offline()||seqsource()||treesource()">
	      		<ul data-bind="foreach:runmenu, visible:!offline()&&seqsource()"><li data-bind="click:function(d){$parent.menuclick('runmenu',d.act)}">
	      			<span data-bind="html:txt+'<img class=\'right\' src=\'img/'+icn+'.png\' title=\''+inf+'\'>'"></span>
	      		</li></ul>
	      		<ul style="border-top:1px solid #999" data-bind="foreach:toolsmenu,visible:toolsmenu().length"><li data-bind="click:function(d){$parent.menuclick('toolsmenu',d.act)},visible:icn!='tree'||$parent.treesource()"><span data-bind="html:txt+'<img class=\'right\' src=\'img/'+icn+'.png\' title=\''+inf+'\'>'"></span></li></ul></div>
	      		<div class="topshadow"></div>
	        </div>
	   </div>
	   
	  <div class="buttonblock" style="left:16%;margin-left:183px">
	    <div id="zoombtns" style="display:inline-block;position:relative;">
	      <a id="zoomout" onclick="zoomout();" class="button zoom">-</a> <a id="zoomin" onclick="zoomin();" class="button zoom">+</a>
	      <div class="toptext zoomperc" data-bind="text:zoomperc"></div>
	      <div class="toptext">Zoom</div>
	    </div>
	  </div>
	  
	  <div class="buttonblock" style="left:19%;margin-left:230px">
	    <a id="undobtn" class="button left" data-bind="html:svgicon('undo'),click:undo,css:{disabled:!activeundo.data()||activeundo.undone()}"></a><a id="historybtn" class="button middle" onclick="togglemenu('undomenu')" data-bind="attr:{title:activeundo.data().name}">
	    <span style="margin-top:0" data-bind="visible:!activeundo.data()">History</span>
	    <!-- ko foreach:{data:activeundo.name,afterRender:marginadd,beforeRemove:waitremove} --><span data-bind="fadeText:name"></span><!-- /ko -->
	    </a><a id="undobtn" class="button right" data-bind="html:svgicon('redo'),click:redo,css:{disabled:!activeundo.data()||!activeundo.undone()}"></a>
	    <div class="toptext">Actions history</div>
	    <div id="undowrap" class="buttonmenuwrap lower">
	      	<div class="menuborder"></div>
	      	<div id="undomenu" class="buttonmenu"  style="margin-top:-35px"><ul data-bind="foreach:{data:undostack,afterAdd:slideadd,beforeRemove:slideremove}"><li data-bind="click:$parent.selectundo,style:{backgroundColor:$data==$parent.activeundo.data()?'#ffcc66':''}"><span data-bind="html:name+'<img class=\'right\' title=\''+info+'\' src=\'img/'+type+'.png\'>'"></span></li></ul></div>
	      		<div class="topshadow"></div>
	        </div>
	  </div>
	  
	  <div class="buttonblock" style="left:23%;margin-left:350px;z-index:2;display:none" data-bind="fadevisible:statusbtn()!=''">
	  	<a id="statusbtn" onclick="dialog('jobstatus')" class="button square" data-bind="html:statusbtn"></a>
	    <div class="toptext">Notifications</div>  
	  </div>
	  
	  <div id="logo" class="buttonblock" onclick="dialog('about')" title="Click for more information">
	  	<img src="img/wasabi_logo.png">
	    <div class="toptext">About Wasabi</div>  
	  </div>
	  
	  <div class="buttonblock" style="right:10px">
	  		<a id="selectmode" class="button" onclick="togglemenu('selectmodemenu')"><span data-bind="text:selmode"></span><span class="after" data-bind="html:svgicon(selmode())"></span></a>
	      	<div class="toptext">Selection mode</div>
	      	<div id="selectmodewrap" class="buttonmenuwrap lower">
	      		<div class="menuborder"></div>
	      		<div id="selectmodemenu" class="buttonmenu"  style="margin-top:-130px"><ul data-bind="foreach:selmodes"><li data-bind="click:$parent.setmode,style:{backgroundColor:$data==$parent.selmode()?'#ffcc66':''}"><span data-bind="text:$data"></span><span class="right" data-bind="html:svgicon($data)"></span></li></ul></div>
	      		<div class="topshadow"></div>
	      	</div>
	   </div>
	   
	</div><!--top buttons-->
	<div id="left">
		<div id="notree" data-bind="fadevisible:!treesource()">No tree data</div>
		<div id="treewrap"><div id="tree"></div><div id="names"></div></div>
		<div id="bottomfade"></div><div id="topfade"></div>
		<div id="borderDrag">&#x22EE;</div>
	</div>
	<div id="namesborderDragline" class="draggerline" data-bind="fadevisible:treesource()||seqsource()"><div id="namesborderDrag" class="dragger">&#x22EE;</div></div>
	<div id="right">
	  <div id="seqwindow">
		<div id="noseq" data-bind="fadevisible:!seqsource()">No sequence data</div>
	    <div id="wrap">
	      <div id="ruler"></div>
	      <div id="seqwrap"><div id="seq"><div id="rborder" class="rowborder"></div></div></div>
	    </div>
	    <img id="leftshadow" src="img/shadow_left.png">
	    <img id="rightshadow" src="img/shadow_right.png">
	    <img id="spinner" style="height:36px" src="img/spinner.gif">
	  </div>
	  <div id="horizontalDragger" class="draggerline"><div class="scrollBtn scrollLeftBtn">&lt;</div><div class="dragger"></div><div class="scrollBtn scrollRightBtn">&gt;</div></div>
	  <div id="verticalDragger" class="draggerline vertical"><div class="scrollBtn scrollUpBtn">&#x2227;</div><div class="dragger"></div><div class="scrollBtn scrollDownBtn">&#x2228;</div></div>
	  <div id="treebin"><div></div></div>
	</div>
	<div id="namelabel"><span></span></div>
	<div id="bottom">
		Andres Veidenberg <span style="color:#ccc">|</span> University of Helsinki<br>
		<a onclick="dialog('about');return false;" title="Click for more info">About Wasabi</a>
	</div>
	
	<div id="treemenu" class="tooltip leftarrow"><div class="arrow"></div><div class="tooltiptitle"></div><div class="tooltipcontentwrap hidden" style="overflow:visible"><div class="tooltipcontent"></div></div></div>
  	<div id="backfade"></div>
  </div>
</body>
</html>